{% extends 'article/base.html' %}
{% load staticfiles %}
{% block title %}栏目{% endblock %}
{% block content %}
    <div>
        <p class="text-right">
            <button class="btn btn-primary" id="add_column" onclick="add_column()">添加栏目</button>
        </p>
        <table class="table table-hover">
            <tr>
                <td>序号</td>
                <td>栏目名称</td>
                <td>操作</td>
            </tr>
            {% for column in columns %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ column.column }}</td>
                    <td>
                        <a href="javascript:" name="edit" onclick="edit_column(this, {{ column.id }})">
                            <span class="glyphicon glyphicon-pencil"></span>
                        </a>
                        <a href="javascript:" name="delete" onclick="delete_column(this, {{ column.id }})">
                            <span class="glyphicon glyphicon-trash" style="margin-left: 20px"></span>
                        </a>
                    </td>
                </tr>
            {% empty %}
                <p>还没有设置过栏目，太懒了。</p>
            {% endfor %}

        </table>
    </div>
    <script type="text/javascript" src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/layer.js' %}"></script>
    {#    <script type="text/javascript" src="{% static 'article/js/article_column.js' %}"></script>#}
    <script type="text/javascript">
        function add_column() {
               var index = layer.open({
                type: 1,
                skin: "layui-layer-rim",
                area: ["400px","200px"],
                title: "新增栏目",
                content: '<div class="text-center" style="margin-top: 20px"><p>请输入新的栏目名称</p><p>{{ column_form.column }}</p></div>',
                btn: ["确定", "取消"],
                yes: function (index, layero) {
                    column_name = $('#id_column').val();
                    $.ajax({
                        url: '{% url "article:article_column" %}',
                        type: 'POST',
                        data: {'column': column_name},
                        success:function (e) {
                            if(e == '1'){
                                parent.location.reload();
                                layer.msg('good');
                            }else{
                                layer.msg('此栏目已有，请更换名称')
                            }
                        }
                    });
                },
                btn2:function (index, layero) {
                    layer.close(index);
                }
            });
        }
    </script>
    <script type="text/javascript">
        function edit_column(the, column_id) {
            var name = $(the).parent("tr").children("td").eq(1).text();
            var index = layer.open({
                type: 1,
                skin: "layui-layer-rim",
                area: ["400px","200px"],
                title: "编辑栏目",
                content: '<div class="text-center" style="margin-top: 20px"><p>编辑栏目名称</p><p><input type="text" id="new_name" value="'+name+'"></p></div>',
                btn: ["确定", "取消"],
                yes: function (index, layero) {
                    new_name = $('#new_name').val();
                    $.ajax({
                        url: '{% url "article:rename_article_column" %}',
                        type: 'POST',
                        data: {'column_id': column_id, "column_name": new_name},
                        success:function (e) {
                            if(e == '1'){
                                parent.location.reload();
                                layer.msg('good');
                            }else{
                                layer.msg('新的栏目名称没有保存，修改失败')
                            }
                        }
                    });
                },
                btn2:function (index, layero) {
                    layer.close(index);
                }
            });
        }
    </script>
    <script type="text/javascript">
        function delete_column(the, column_id) {
            var name = $(the).parent("tr").children("td").eq(1).text();
            var index = layer.open({
                type: 1,
                skin: "layui-layer-rim",
                area: ["400px","200px"],
                title: "编辑栏目",
                content: '<div class="text-center" style="margin-top: 20px"><p>确定删除栏目?</p></div>',
                btn: ["确定", "取消"],
                yes: function () {
                    $.ajax({
                        url: '{% url "article:delete_article_column" %}',
                        type: 'POST',
                        data: {'column_id': column_id},
                        success:function (e) {
                            if(e == '1'){
                                parent.location.reload();
                                layer.msg('删除成功');
                            }else{
                                layer.msg('删除失败')
                            }
                        }
                    });
                },
            });
        }
    </script>
{% endblock %}
